<template>
  <section class="container">
    <div>
      <app-logo/>
      <img :src="qrbase64" alt="qrcode">
    </div>
  </section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import { getWxqrcode } from '../api/api'
import io from 'socket.io-client'
import { mapState } from 'vuex'

export default {
  async beforeMount() {
    getWxqrcode().then(res => {
      console.log(res)
      this.qrbase64 = res.data.qrcode
      const socket = io('http://test.wlijie.com');
      //向服务器发送uuid绑定socket.id
      let uuid = res.data.uuid
      socket.emit('register', { uuid: uuid });
      //手机端扫码确认登陆后
      socket.on('result',  async (data) => {
        //这里可以拿到data.token 拿到后就可以进行登陆了
        console.log(data.token)
        await this.$store.dispatch('setAuthUser', data.token)

        this.$router.replace('/')
        console.log("登陆成功");
        //后续操作
      })

    })
  },

  data () {
    return {
      qrbase64: ''
    }
  },

  computed: {
    ...mapState([
      'sessionid'
    ])
  },
  components: {
    AppLogo
  }
}

</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

</style>
